<style lang="less" scoped="scoped">
	.word,.hot_city,.sort,.letterName{
		height: .4rem;
		line-height: .4rem;
		margin-left: .2rem;
		font-size: .15rem;
	}
	.location{
		height: .47rem;
		line-height: .47rem;
		background: white;
		padding-left: .3rem;
		color: lightcoral;
	}
	.city_list{
		display: flex;
		width: 100%;
		height: .47rem;

		align-items: center;

		text-align: center;
		background: white;
		color: gray;
		li{
			width: 25%;
			
		}
	}
	.letter{
		width: 100%;
		background: white;
		color: gray;
		li{
			width: 25%;
			line-height: .47rem;
			text-align: center;
			margin: 0 auto;	
			display: inline-block;
			border-bottom: .01rem solid lightgray;
			
		}
	}
	.letter li:nth-last-of-type(1) {
		border-bottom: none;
	}
	.letter li:nth-last-of-type(2) {
		border-bottom: none;
	}
	.regionalName{
		width: 100%;
		background: white;
		color: gray;
		.regional{
			width: 25%;
			line-height: .47rem;
			text-align: center;
			margin: 0 auto;	
			display: inline-block;
			border-bottom: .01rem solid #EBEBEB;
		}
	}
	a{color: gray;}
	.iconfont{
		opacity: .5;
		position: fixed;
		bottom: .1rem;
		right: .1rem;
		font-size: .35rem;
	}
</style>

<template>
	<div id="">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_836931_yx9fcf1ojib.css"/>
		<p class="word">GPS定位你所在的城市</p>
		<div class="location">
			<span class="current_location">深圳</span>
		</div>
		<p class="hot_city">热门城市</p>
		<ul class="city_list">
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
			<li>深圳</li>
		</ul>
		<p class="sort">按字母排序</p>
		<ul class="letter"  >
			<li v-for='item in arr' @click="clickLetter(item)">
				<!--<a :href="`#${item}`">{{item}}</a>-->
				{{item}}
			</li>
		</ul>
		
		<ul class="together">
			<!--遍历字母以及下标-->
			<li class="every" v-for="(items,index) in arr" :key="index">
				<!--<p :id="items"></p>-->
				<p  v-for="(item,value,index) in obj" v-if="value === items"  class="letterName" :id="items">{{items}}</p>
				<ul class="regionalName">
					<li class="regional" v-for="(i,v) in city" v-if="i.pinyin.charAt(0)===items" :key="i.id">{{i.name}}</li>
				</ul>
			</li>
			
		</ul>
			<i v-if="isopen" @click="toTop"  class="iconfont icon-huidaodingbu"></i>
		
	</div>
</template>

<script>
	import { ajax } from '@/utils'

	export default{
		data(){
			return{
				isopen: false,
				obj:{},
				city:[],
				value:'',
				
				arr:['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z']
			}
		},
		
		created(){
			this.getMapData();
				
		},
		// mounted为钩子函数，完成了对立面滚动方法的调用
		mounted () {
			console.log(this)
			let _this=this
			
			console.log(_this)
			// 监听关于滚动事件
	      	window.addEventListener('scroll', ()=>{
	      		_this.handleScroll();
	      		_this.toTop();
	      	})
	   	},
		
		
		methods:{
			getMapData(){
				const url='/v4/api/city';
				const data = {};
				ajax(url,data,(res)=>{
					this.city = res.cities	;

					this.obj = this.mapList(res.cities)
					
					

				})
			},
			
			
			// 用于处理window下的滚动方法(固定套路)
			handleScroll () {
		        if(document.documentElement.scrollTop>100){

					
					this.isopen = true;
				} else {
					return false;
				}
		    },
			
			
			// 处理回到顶部方法
			toTop(x){
				if(x){
					document.documentElement.scrollTop=0;
					this.isopen=!this.isopen;
					return;
				}
				if(document.documentElement.scrollTop<100){
					this.isopen = false;
				}else{
					this.isopen=true;
				}
			},
			
			
			// 单独处理请求回来的数据
			mapList(list){
				
				let set= new Set();
				for(let item of list){
					
					set.add(item.pinyin.charAt(0));
					
					
				}
				
				let count = {};
				
				for(let i of set){
					count[i] = list.filter((item) =>{
//						console.log(item.pinyin.charAt(0))
						return item.pinyin.charAt(0) === i;
						
					})
				}
				
				return count;
			},
			
			clickLetter(item){
				const content=document.getElementById(item);
				document.documentElement.scrollTop= content.offsetTop
			},
			
			
		}
	}
</script>
					
				
				
				

				

				
							
	
	
			
			
			

